React Native自定义控件底部抽屉菜单的示例 |
您所在的位置:网站首页 › react native 状态栏 › React Native自定义控件底部抽屉菜单的示例 |
React Native自定义控件底部抽屉菜单的示例
发布时间:2020-10-25 17:03:29
来源:脚本之家
阅读:202
作者:Songlcy
栏目:web开发
一、需求分析 原生开发中,自定义View可谓是屡见不鲜的事情,往往系统的控件总不能满足现实的需求。五花八门的产品设计需要我们做出不同的View。关于自定义View的内容网上已经有很多的博文,本篇博客要和大家分享如何在React Native中自定义组件实现抽屉菜单控件效果。分享功能在App中的重要性想必是不言而喻的,那么RN中如何实现这种效果呢? React Native 系统库中只提供了IOS的实现,即ActionSheetIOS.该控件的显示方式有两种实现: (1)showActionSheetWithOptions (2)showShareActionSheetWithOptions 第一种是在iOS设备上显示一个ActionSheet弹出框。第二种实现是在iOS设备上显示一个分享弹出框。借用官方的图片说明如下:
IOS设备上的实现系统已经提供了,接下来我们就需要如何适配Android。在原生开发中,自定义View也是有基本的流程: (1)自定义控件类,继承View或系统控件。 (2)自定义属性 (3)获取自定义属性,并初始化一系列工具类 (4)重写onMeasure方法,对控件进行测量 (5)如果是自定义布局,还需要重写onLayout进行布局 在React Native中自定义组件的思路基本和原生自定义相似。所以按照这个流程,我们一步步实现即可。 二、功能实现 1、自定义组件,实现Component export default class AndroidActionSheet extends Component2、自定义属性 // 1.声明所需要的属性 static propTypes= { title: React.PropTypes.string, // 标题 content: React.PropTypes.object, // 内容 show: React.PropTypes.func, // 显示 hide: React.PropTypes.func, // 隐藏 } constructor(props) { super(props); this.translateY = 150; this.state = { visible: false, sheetAnim: new Animated.Value(this.translateY) } this.cancel = this.cancel.bind(this); }3、实现基本布局 /** * Modal为最外层,ScrollView为内容层 */ render() { const { visible, sheetAnim } = this.state; return( { this._renderTitle() } {this._renderContainer()} ) }可以看到上面我们定义了基本的布局,布局中使用_renderTitle()方法来渲染标题部分,内容区域为ScrollView,并且为横向滚动,即当菜单项超过屏幕宽度时,可以横向滑动选择。在内部调用了renderContainer方法来渲染菜单: /** * 标题 */ _renderTitle() { const { title,titleStyle } = this.props; if (!title) { return null } // 确定传入的是不是一个React Element,防止渲染的时候出错 if (React.isValidElement(title)) { return ( {title} ) } return ( {title} ) } /** * 内容布局 */ _renderContainer() { const { content } = this.props; return ( { content } ) }当我们需要点击Modal,进行关闭时,还需要处理关闭操作,Modal并没有为我们提供外部关闭处理,所以需要我们单独实现,从布局代码中我们看到TouchableOpacity作为遮罩层,并添加了单机事件,调用cancel来处理: /** * 控制Modal点击关闭,Android返回键关闭 */ cancel() { this.hide(); }4、自定义方法,对外调用 在外部我们需要控制控件的显示和隐藏,所以需要对外公开显示、关闭的方法: /** * 显示 */ show() { this.setState({visible: true}) Animated.timing(this.state.sheetAnim, { toValue: 0, duration: 250 }).start(); } /** * 隐藏 */ hide() { this.setState({ visible: false }) Animated.timing(this.state.sheetAnim, { toValue: this.translateY, duration: 150 }).start(); }5、使用 至此,我们自定义组件就完成了。整体来看,基本的原理还是很简单的,主要利用了自定义属性,传参,动画,就可以轻松的实现了。本篇博客重点不是为了让大家知道怎么去写出这个效果,而是让大家明白,当我们遇到一个需要自定义的实现时,该如何去一步步实现。 三、效果图 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。 免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 react native 底部 上一篇新闻:大清单报表的打印? 下一篇新闻:spring boot Logging的配置以及使用详解![]() 红包可用于(云服务器、高防服务器、裸金属服务器、高防IP、云数据库、CDN加速)购买和续费 猜你喜欢 sass和bootstrap有什么区别 HTML5怎样实现图片无限加载瀑布流效果 Shell逐行处理文本求和的示例分析 这么在Spring Cloud中使用Sleuth JavaScript运算符的示例分析 Java中原型模式的示例分析 JavaScript中回调、Promise和Async/Await的示例分析 2021最新TIOBE编程语言排行榜 Spring中如何进行日常Bug排查 Javascript中运算符的示例分析 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |